<template>
  <j-modal
    title="批量导入"
    :width="600"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-upload-dragger
        :multiple="false"
        :accept="accept"
        :fileList="fileListData"
        :remove="handleRemove"
        :beforeUpload="beforeUpload"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
        <p class="ant-upload-hint">支持扩展名：{{ accept }}</p>
      </a-upload-dragger>
      <div class="ant-upload-matter">
        <p>注意事项：</p>
        <p>1.请勿修改模版格式，以免导入失败；</p>
      </div>
    </a-spin>
    <template slot="footer">
      <a class="footer-model" @click="handleModal">下载数据模板</a>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleOk"> 开始导入 </a-button>
    </template>
  </j-modal>
</template>

<script>
// import { importExcel, exportWpTemplate } from '@/api/alarm.js'
import * as alarmApi from '@/api/alarm.js'
export default {
  // props: {
  //   parentarr: {
  //     type: Array,
  //     default() {
  //       return []
  //     },
  //   },
  //   modalType: {
  //     type: String,
  //     default: '',
  //   },
  // },
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      result: {},
      confirmLoading: false,
      fileListData: [],
      accept: '.xls,.xlsx', // 导入的文件格式
      modalType: '',
    }
  },
  created() {},
  computed: {
    isDisabled() {
      return this.fileListData.length > 0 ? false : true
    },
  },
  methods: {
    add(n) {
      this.visible = true
      this.modalType = n
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const { fileListData } = this
      if (fileListData && fileListData.length === 0) {
        this.$message.error('请选择导入文件')
        return
      }
      const formData = new FormData()
      fileListData.forEach((file) => {
        formData.append('files', file)
      })
      this.confirmLoading = true
      if (this.modalType == 1) {
        alarmApi
          .importZsExcel(formData)
          .then((res) => {
            if (res.success) {
              this.confirmLoading = false
              this.showConfirm(res.result)
            } else {
              this.confirmLoading = false
              this.$message.error(res.message)
            }
          })
          .catch((e) => {
            this.confirmLoading = false
            this.$message.error('导入出错了')
          })
      }
      if (this.modalType == 2) {
        alarmApi
          .importYczhExcel(formData)
          .then((res) => {
            if (res.success) {
              this.confirmLoading = false
              this.showConfirm(res.result)
            } else {
              this.confirmLoading = false
              this.$message.error(res.message)
            }
          })
          .catch((e) => {
            this.confirmLoading = false
            this.$message.error('导入出错了')
          })
      }
      if (this.modalType == 3) {
        alarmApi
          .importZhExcel(formData)
          .then((res) => {
            if (res.success) {
              this.confirmLoading = false
              this.showConfirm(res.result)
            } else {
              this.confirmLoading = false
              this.$message.error(res.message)
            }
          })
          .catch((e) => {
            this.confirmLoading = false
            this.$message.error('导入出错了')
          })
      }
    },
    showConfirm(result) {
      this.$emit('importData', result)
      this.visible = false
      // this.$confirm({
      //   title: '手机号已导入完成，是否发送预警短信?',
      //   content: (h) => (
      //     <div>
      //       成功导入 <span style="color:#02a7f0;">100</span> 个手机号，有效 <span style="color:#02a7f0;">100</span>
      //       个手机号，无效 <span style="color:red;">0</span> 个手机号
      //     </div>
      //   ),
      //   okText: '发送',
      //   onOk() {
      //     console.log('OK')
      //     this.handleCancel()
      //   },
      //   onCancel() {
      //     console.log('Cancel')
      //     this.handleCancel()
      //   },
      //   class: 'test',
      // })
    },
    handleCancel() {
      this.close()
    },
    handleModal() {
      if (this.modalType == 1) {
        alarmApi.exportWpTemplate().then((res) => {
          if (res && res.size > 0) {
            const fileName = '物品告警物品名称-导入模板.xls'
            this.downLoadMix(res, fileName)
          } else {
            this.$message.warn('模板不存在！')
          }
        })
      }
      if (this.modalType == 2) {
        alarmApi.exportYczhTemplate().then((res) => {
          if (res && res.size > 0) {
            const fileName = '异常账户名称-导入模板.xls'
            this.downLoadMix(res, fileName)
          } else {
            this.$message.warn('模板不存在！')
          }
        })
      }
      if (this.modalType == 3) {
        alarmApi.exportZhmTemplate().then((res) => {
          if (res && res.size > 0) {
            const fileName = '账户告警名称-导入模板.xls'
            this.downLoadMix(res, fileName)
          } else {
            this.$message.warn('模板不存在！')
          }
        })
      }
    },
    //上传前拦截
    beforeUpload(file) {
      this.fileListData = [file] //[...this.fileListData, file];
      return false
    },
    // 移除
    handleRemove(file) {
      const index = this.fileListData.indexOf(file)
      const newFileList = this.fileListData.slice()
      newFileList.splice(index, 1)
      this.fileListData = newFileList
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) //res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    },
  },
}
</script>

<style scoped lang="less">
/deep/.ant-upload-matter {
  padding: 30px 0 0;
  p {
    margin-bottom: 0;
  }
}
/deep/.ant-modal-footer {
  position: relative;
  .footer-model {
    position: absolute;
    left: 20px;
    &::before {
      content: '*';
      color: #f5222d;
      margin-right: 5px;
    }
  }
}
</style>
